import QtQuick 2.0
import CustomComponents 1.0


Rectangle {
    id: window
   // property alias  w:600
    //width: 600;

    ////property alias  h:460
    //height: 460;
   // property alias c
    color: "#232323"
    signal asw
    ListModel {
        id: easingTypes
        ListElement { name: "Easing.Linear"; type: Easing.Linear; ballColor: "DarkRed" }
        ListElement { name: "Easing.InQuad"; type: Easing.InQuad; ballColor: "IndianRed" }
        ListElement { name: "Easing.OutQuad"; type: Easing.OutQuad; ballColor: "Salmon" }
    }
    Component {
        id: delegate

        Item {
            height: 56; width: window.width

            Text { text: name; anchors.centerIn: parent; color: "White" }

            Rectangle {
                id: slot1; color: "#121212"; x: 30; height: 46; width: 46
                border.color: "#343434"; border.width: 1; radius: 12
                anchors.verticalCenter: parent.verticalCenter
            }

            Rectangle {
                id: slot2; color: "#121212"; x: window.width - 76; height: 46; width: 46
                border.color: "#343434"; border.width: 1; radius: 12
                anchors.verticalCenter: parent.verticalCenter
            }

            Rectangle {
                id: rect; x: 30; color: "#454545"
                border.color: "White"; border.width: 2
                height: 46; width: 46; radius: 12
                anchors.verticalCenter: parent.verticalCenter

                MouseArea {
                    onClicked: if (rect.state == '') rect.state = "right"; else rect.state = ''
                    anchors.fill: parent
                    anchors.margins: -5 // Make MouseArea bigger than the rectangle, itself
                }

                states : State {
                    name: "right"
                    PropertyChanges { target: rect; x: window.width - 76; color: ballColor }
                }

                transitions: Transition {
                    NumberAnimation { properties: "x"; easing.type: type; duration: 1000 }
                    ColorAnimation { properties: "color"; easing.type: type; duration: 1000 }
                }
            }
        }
    }
    Flickable {
        anchors { top:window.top; left:window.left ; right:window.right; bottom: window.bottom}
        contentHeight: layout.height
       // contentWidth: layout.width
        //visibleArea.widthRatio: window.width
      //  visibleArea.heightRatio: window.height
        //maximumFlickVelocity: parent.top
        //maximumFlickVelocity: anchors.fill
        //contentWidth:
        Column {
            id: layout

            anchors {  top: value.bottom; topMargin: 10; left: parent.left; right: parent.right }
            Repeater { model: easingTypes; delegate: delegate }
        }
    }
    Rectangle {
        id: value
        color: "White"
        height: 35
        anchors { top: parent.top; left: parent.left; right: parent.right }
    }
    Timer {
        id: timer
        interval: 3000

        onOut: {
            console.log( "Timer fired!" );
            easingTypes.insert(0,{ name: "Easing.Linear", type: Easing.Linea, ballColor: "DarkRed" })
        }
    }
}
